<%@ page import="com.itqn.pojo.Employee" %>
<% Employee employee = (Employee) request.getSession().getAttribute("login");%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/header.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/c/font_4586065_z6j98pwv5lb.css">
</head>
<body>
<div class="maindiv">
    <div class="header">
        <div class="logo">
            <img src="https://supermarket-management.oss-cn-beijing.aliyuncs.com/4f7b8e3b5014e15c3a6de1e6b7dd6e7.png"
                 style="width: 117px; height: 60px; padding-left: 27px; float: left">
        </div>
        <div class="loginLaterName">
            <%=employee.getName()%>
            <div class="password">修改密码<i class="iconfont icon-xiugaimima"></i></div>
            <div class="logout">退出登录<i class="iconfont icon-tuichudenglu"></i></div>
        </div>
    </div>
    <div class="addoverlay">
        <div class="dialog">
            <div class="dheader">
                <span>修改密码</span>
                <span></span>
            </div>
            <div class="dbody">
                <input type="hidden" name="id" value="<%=employee.getId()%>">
                <div>
                    <span>*</span>原始密码： <input type="text" placeholder="请输入旧密码:"
                                                   id="oidPassword" name="OidPassword">
                </div>
                <div>
                    <span>*</span>新密码：&nbsp&nbsp&nbsp <input type="text" placeholder="请输入新密码:" id="newPassword"
                                                                name="NewPassword">
                    <span id="newPasswordError"></span>
                </div>
                <div>
                    <span>*</span>确认密码： <input type="text" placeholder="请输入确认密码:" id="affirmPassword"
                                                   name="affirmPassword">
                    <span id="affirmPasswordError"></span>
                </div>
            </div>
            <div class="dfoot">
                <input type="button" name="cancel" class="cancelAdd" value="取 消"/>
                <input type="button" name="confirm" class="confirmAdd" value="修 改"
                       onclick="uppassword(<%=employee.getId()%>)"/>
            </div>
        </div>
    </div>
    <script>
        document.querySelector('.loginLaterName').addEventListener('mouseenter', function () {
            document.querySelector('.logout').style.display = 'block'
            document.querySelector('.password').style.display = 'block'
        })
        document.querySelector('.loginLaterName').addEventListener('mouseleave', function () {
            document.querySelector('.logout').style.display = 'none'
            document.querySelector('.password').style.display = 'none'
        })
        document.querySelector('.logout').addEventListener('click', function () {
            location.href = '/logout'
        })
        document.querySelector('.password').addEventListener('click', function () {
            document.querySelector('.addoverlay').style.display = 'block'
        })
        document.querySelector('.cancelAdd').addEventListener('click', () => {
            document.querySelector('#newPassword').value = ''
            document.querySelector('#affirmPassword').value = ''
            document.querySelector('#oidPassword').value = ''
            document.querySelector('#newPasswordError').classList.add('aaaaaa')
            document.querySelector('#affirmPasswordError').classList.add('aaaaaa')
            document.querySelector('.addoverlay').style.display = 'none'
        })
        document.querySelector('.confirmAdd').addEventListener('click', () => {
            if (document.querySelector('#affirmPasswordError').innerHTML || document.querySelector('#newPasswordError').innerHTML) return

            document.querySelector('#newPasswordError').classList.add('aaaaaa')
            document.querySelector('#affirmPasswordError').classList.add('aaaaaa')
            document.querySelector('.addoverlay').style.display = 'none'
        })

        const newPassword = document.querySelector('#newPassword');
        const regular = /^\d{1,9}$/;
        newPassword.addEventListener('blur', () => {
            if (newPassword.length) {
                document.querySelector('#newPasswordError').innerHTML = '密码不能为空!'
                return false;
            }
            if (!regular.test(newPassword.value)) {
                document.querySelector('#newPasswordError').classList.remove('aaaaaa')
                document.querySelector('#newPasswordError').innerHTML = '密码只能由数字组成!'
                document.querySelector('#newPasswordError').style.color = 'red';
                return false;
            } else {
                document.querySelector('#newPasswordError').innerHTML = ''
                return true;
            }
        })
        const affirmPassword = document.querySelector('#affirmPassword');
        affirmPassword.addEventListener('blur', () => {
            if (!(affirmPassword.value === newPassword.value)) {
                document.querySelector('#affirmPasswordError').classList.remove('aaaaaa')
                document.querySelector('#affirmPasswordError').innerHTML = '两次输入的密码不一致!'
                document.querySelector('#affirmPasswordError').style.color = 'red'
                return false;
            } else {
                document.querySelector('#affirmPasswordError').innerHTML = ''
                return true;
            }
        })


        function uppassword(id) {
            if (document.querySelector('#affirmPasswordError').innerHTML || document.querySelector('#newPasswordError').innerHTML) return
            $.ajax({
                type: "get",
                url: '/UpPasswordServlet',
                data: {
                    id: id,
                    oldPassword: $('#oidPassword').val(),
                    NewPassword: $('#newPassword').val(),
                    confirm: $('#affirmPassword').val()
                },
                success: function (data) {
                    alert(data)
                    if (data === '修改成功!') {
                        location.href = '/logout'
                    } else {
                        document.querySelector('#newPassword').value = ''
                        document.querySelector('#affirmPassword').value = ''
                        document.querySelector('#oidPassword').value = ''
                    }
                }
            })
        }

    </script>
</body>
</html>
